<!--
 * @Description: 
 * @Author: zwx
 * @Date: 2024-11-07 09:21:42
 * @LastEditors: zwx
 * @LastEditTime: 2024-11-07 11:35:03
 * @又活了一天: 你真厉害！！！
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fruit</title>
    <script>
        function add(a, b) {
            return a + b;
        }
        var d = add(1, 2);
        console.log("😊yb ~ d:", d);
        
        var myAdd = function (a, b) {
        return a + b;
        }
        var e = myAdd(1, 2);
        console.log("😊yb ~ e:", e);
    </script>
</head>
<body>
    喜欢的水果：<input 
    id="inputFruit"
    type="text" 
    placeholder="请输入你喜欢的水果"
    value="苹果" >
    <br>
    <input id="btn1"
    type="button"
    value="按钮1"
    onclick="clickBtn1()" >
    
    <input id="btn2"
    type="button"
    value="按钮2"
    onclick="add(1,2)" >
    
    <input id="btn3"
    type="button"
    value="按钮3">
</body>

<script>
    // 获取输入框元素
    var fruitElement = document.getElementById("inputFruit");
    //alert("阻塞运行")
    console.log("😊yb ~ fruitElement:", fruitElement);
    if (fruitElement) {
        var fruitValue = fruitElement.value;
        console.log("😊yb ~ fruitValue:", fruitValue); 
        switch(fruitValue) {
            case "苹果":
                alert("用户喜欢苹果");
                break;
            case "香蕉":
                alert("用户喜欢香蕉");
                break;
        }
    }
    function clickBtn1() {
        console.log("btn1被点击");
    }
    
    var btn3 = document.getElementById("btn3");
    console.log("😊yb ~ btn3:", btn3);
    if(btn3){
        btn3.onclick=function(){
            console.log("btn3被点击");
        }
    }
   
</script>

</html>
